<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            width: 300px;
            height: 300px;
            border: solid 1px red;
        }
        .blue{
            width: 100px;
            height: 100px;
            border: solid 1px blue;
        }
    </style>
</head>
<body>
    <div id="div">
        
        <h2 id="h2">我是二级标题:即将被修改！</h2>
        <h3 id="h3">我是三级标题</h3>
    </div>
    
<script>
           /* 更新节点 */
           let a=document.getElementById('h2');
           setTimeout(() => {
            a.innerText='我被修改了！';
            a.style.color='red';
           }, 2000);

           /* 在指定位置添加节点 */
           let div=document.getElementById('div'); /* 获取父节点 */
           let bb=document.createElement('h3');  /* 新建一个节点 */
           bb.innerText='我是新插入的节点，我在2秒后会被删除！'
           setTimeout(() => {
            div.insertBefore(bb,a)  /* 参数1：插入的节点 参数2：在哪个位置前 */
           }, 3000);

       
           /* 删除节点 */
           setTimeout(() => {
            div.removeChild(div.children[0])
        }, 5000);

       </script>

        <div id="test-div">
            <p id="test-js">javascript</p>
            <p>Java</p>
        </div>

<!-- 
        // 修改文本为JavaScript:
// TODO:

// 修改CSS为: color: #ff0000, font-weight: bold
// TODO:
 -->
<!-- // 更新: -->
<script>

let test_div=document.getElementById('test-div');
let js=document.getElementById('test-js');
js.innerText='JavaScript';
js.style.color='#ff0000';
js.style.fontWeight='bold'


if (js && js.parentNode && js.parentNode.id === 'test-div' && js.id === 'test-js') {
    if (js.innerText === 'JavaScript') {
        if (js.style && js.style.fontWeight === 'bold' && (js.style.color === 'red' || js.style.color === '#ff0000' || js.style.color === '#f00' || js.style.color === 'rgb(255, 0, 0)')) {
            console.log('测试通过!');
        } else {
            console.log('CSS样式测试失败!');
        }
    } else {
        console.log('文本测试失败!');
    }
} else {
    console.log('节点测试失败!');
}
</script>




</body>
</html>